<template>
	<view class="container">
		<view class="box">
			<view class="title dis">投诉账号<text>(必填)</text></view>
			<view class="account">
				<u--input placeholder="请复制微信号填写" border="surround" v-model="nick_name"></u--input>
			</view>
		</view>
		<view class="content">
			<view class="title">投诉内容<text>(选填)</text></view>
			<u--textarea v-model="content" placeholder="请输入投诉内容" count></u--textarea>
		</view>
		<view class="box">
			<view class="title">证据凭证({{fileList.length}}/3)<text>(选填)</text></view>
			<view class="upload">
				<view class="images" v-for="(item,index) in fileList" :key="index">
					<view class="close" @click="deleteImage(index)"><u-icon name="close" size="10" color="#fff"></u-icon></view>
					<image class="img" :src="item.url" mode="aspectFill" @click="previewImage(item.url)"></image>
				</view>
				<view class="plus-warp" @click="handleChoose" v-if="Object.keys(fileList).length < 3">
					<u-icon name="plus" size="30" color="#e3e4e6"></u-icon>
				</view>
			</view>
		</view>
		<view class="btn-warp">
			<u-button type="primary" text="提交" @click="onsubmit"></u-button>
			<u-safe-bottom></u-safe-bottom>
		</view>
		<u-modal :show="show" :content='modalContent' @confirm="show = false"></u-modal>
	</view>
</template>

<script>
	import {wxComplaint} from '@/api/index.js'
	import Compressor from 'compressorjs'
	import config from '@/config'
	export default {
		data() {
			return {
				cate: undefined, //投诉类型
				nick_name: '', //投诉账号
				content: '', //投诉内容
				fileList: [],
				compreUrlList:[],
				imageList:[],
				src:'',
				show:false,
				modalContent:'图片大小不能超过2M',
			}
		},
		onLoad(options) {
			this.cate = options.cate
		},
		methods: {
			// 删除图片
			deleteImage(index) {
				this.fileList.splice(index,1)
				this.imageList.splice(index,1)
			},
			// 预览图片
			previewImage(url) {
				uni.previewImage({
					urls:[url]
				})
			},
			// 选择照片
			handleChoose() {
				uni.chooseImage({
					count: 3,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: async (res) => {
						let files = res.tempFiles
						files.forEach(async (item,index) => {
							const size = res.tempFiles[index].size / 1024 / 1024; // 计算文件大小（单位：M）
							if (size > 2) {
							  // this.$modal.msgError('图片大小不能超过2M')
							  this.show = true
							  this.modalContent = '图片大小不能超过2M'
							} else {
								this.fileList.push({
									name: 'file',
									url: res.tempFilePaths[index],
									file: item
								})
								this.imageList.push(await this.uploadImage(item))
							}
						})
						if(this.fileList.length > 3) {
							this.fileList = this.fileList.slice(0,3)
						}
					},
				})
			},
			// 压缩图片
			// compressionImage(file) {
			// 	return new Promise((resolve,reject) => {
			// 		new Compressor(file, {
			// 		  quality: 0.4, // 压缩质量
			// 		  convertSize:false,
			// 		  success: (result) => {
			// 		    //这里是返回blob流转化为新的blobUrl
			// 			// const blobUrl = URL.createObjectURL(result)
			// 			result.path = URL.createObjectURL(result)
			// 			const fileA = new File([result],result.name,{type:result.type})
			// 			// resolve(blobUrl)
			// 			resolve(fileA)
			// 		  },
			// 		  error: (error) => {
			// 		    console.error('图片压缩失败', error);
			// 			reject(error)
			// 		  },
			// 		});
			// 	})
			// },
			uploadImage(item) {
				return new Promise((resolve,reject) => {
					uni.uploadFile({
						url:config.baseUrl + '/wx_complaint_upload',
						name:'pic',
						filePath:item.path,
						success: (res) => {
							resolve(JSON.parse(res.data).data[0])
						},
						fail(err) {
							console.log(err)
							reject(err)
						}
					})
				})
			},
			// 提交
			onsubmit() {
				if (!this.nick_name) {
					this.modalContent = '请填写投诉昵称'
					this.show = true
					// this.$modal.msgError('请填写投诉昵称')
					return
				}
				const data = {
					cate: this.cate,
					nick_name: this.nick_name,
					content: this.content,
					pic:this.imageList.join(',')
				}
				wxComplaint(data).then(res => {
					this.$modal.msgSuccess('提交成功')
					this.nick_name = ''
					this.content = ''
					this.fileList = []
					this.imageList = []
				})
			}
		}

	}
</script>

<style lang="scss">
	.tips {
		font-size: 24rpx;
		color: #666;
		margin-left: 8rpx;
	}
	.dis {
		display: flex;
		align-items: center;
	}
	.container {
		padding: 20rpx;
	}

	.account {
		margin-top: 10rpx;
	}

	.content {
		margin: 30rpx 0;
	}

	.title {
		margin-bottom: 10rpx;
		font-size: 30rpx;
		color: #000;
		text {
			font-size: 24rpx;
			color: #818181;
		}
	}

	.btn-warp {
		padding: 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.upload {
		display: flex;
		flex-wrap: wrap;
		.plus-warp {
			width: 200rpx;
			height: 200rpx;
			background: #F4F5F7;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.images {
			width: 200rpx;
			height: 200rpx;
			margin-right: 32rpx;
			display: block;
			position: relative;
			.img {
				width: 100%;
				height: 100%;
			}
			.close {
				position: absolute;
				top: 0;
				right: 0;
				width: 30rpx;
				height: 30rpx;
				z-index: 9;
				background: rgba(0, 0, 0, .7);
				border-bottom-left-radius: 30rpx;
				padding-top: 4rpx;
				padding-right: 4rpx;
				display: flex;
				align-items: flex-start;
				justify-content: flex-end;
			}
		}
	}
</style>